//  When I wrote this code, only God and I knew what it was. Now, only God knows!
<!--
 * @Description:IOS 审核注册页面；
 * @Author: yjp
 * @Date: 2020-12-02
 * @LastEditTime: 2020-12-02
 * @FilePath: /src/views/loginNew/views/register_login/index.vue
-->

<template>
  <div class="page-container">
    <Header :plusGoRouter="true">
      <span slot="extra">用户注册</span>
    </Header>
    <div class="register_1">
      <div class="content">
        <div>
          <div class="user-info">
            <i class="jeicon jeicon-mobile " />
            <input
              v-model="loginInfo.phone"
              type="tel"
              placeholder="输入手机号"
              class="form-input"
              maxlength="11"
            >
          </div>
          <p class="phone-desc">
            <span>验证手机号（此手机号将作为登录时的个人账号）</span>
          </p>
          <div class="user-info ">
            <i class="jeicon jeicon-lock" />
            <input
              v-show="showPwd"
              v-model="loginInfo.pwd"
              type="password"
              placeholder="密码"
              class="form-input"
              maxlength="20"
            >
            <input
              v-show="!showPwd"
              v-model="loginInfo.pwd"
              type="text"
              placeholder="密码"
              class="form-input"
              maxlength="20"
            >
            <i
              v-show="!showPwd"
              @tap="showPwd = !showPwd"
              class="jeicon jeicon-eye viewpwd"
            />
            <i
              v-show="showPwd"
              @tap="showPwd = !showPwd"
              class="jeicon jeicon-eye-close viewpwd"
            />
          </div>
          <button
            @tap="firstNext"
            class="login-btn"
          >
            提交审核
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { validate, toastValidate } from '../../../../util/validate';
import Header from '@/components/header';

export default {
  name: 'Register',
  components: {
    Header
  },
  data() {
    return {
      showPwd: true,
      showIndex: '1',
      loginInfo: {},
      company: [],
      appLoginInfo: {},
      sendAuthCode: true, // 判断
      auth_time: 0,
      isNewAccount: false,
      params: {},
    };
  },
  created() {
    mui.init();
  },
  mounted() {
    const currentWeb = plus.webview.currentWebview();
    this.params = currentWeb;
    const originalHeight = document.documentElement.clientHeight || document.body.clientHeight;

    window.onresize = () => {
      const resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;
      if (resizeHeight - 0 < originalHeight - 0) {
        plus.webview.currentWebview().setStyle({
          height: originalHeight, // 强设置为原高度
        });
      }
    };
  },
  methods: {
    // 提交审核
    async firstNext() {
      if (
        !toastValidate('手机号', validate.isNull(this.loginInfo.phone))
        || !toastValidate(
          '',
          validate.isPhone(this.loginInfo.phone),
          '手机号格式不正确'
        )
        || !toastValidate(
          '密码',
          validate.isNull(this.loginInfo.pwd)
        )
        || !toastValidate(
          '',
          validate.regPwd(this.loginInfo.pwd),
          '密码为6位以上字母+数字'
        )
      ) {
        return false;
      }
      if (JE.getLSItem('iosRegister') === this.loginInfo.phone) {
        mui.toast('此手机号已注册或待审核中,请等待');
      } else {
        JE.msg('提交成功，请等待审核！');
        JE.setLSItem('iosRegister', this.loginInfo.phone);
      }
    }
  },
};
</script>

<style lang="less" scoped>
.register_1 {
  display: flex;
  justify-content: center;
  position: absolute;
  width: 100%;
  .content {
    position: absolute;
    top: 304px;

    .user-info-bg {
      width: 600px;
      height: 96px;
      border-radius: 8px;
      background-color: rgba(241, 241, 241, 1);
      display: flex;
      align-items: center;
      padding-left: 40px;
    }
    .user-info {
      .user-info-bg;
    }

    .form-input {
      width: 462px;
      border-radius: 16px;
      background-color: rgba(241, 241, 241, 1);
      font-size: 28px;
      border: none;
      margin-bottom: 0;
      line-height: normal;
      padding: 0 0 0 52px;
    }

    .marginBottom60 {
      margin-bottom: 60px;
    }
    .user-info-pwd-message {
      .user-info-bg;
      .form-input {
        width: 362px;
      }
      .get-validate-code {
        width: 128px;
        height: 56px;
        line-height: 56px;
        border-radius: 4px;
        background-color: rgba(81, 104, 255, 1);
        color: rgba(255, 255, 255, 1);
        font-size: 30px;
        padding: 0;
        text-align: center;
        vertical-align: text-bottom !important;
        position: absolute;
        //margin-top: 10px;
        right: 40px;
      }
    }

    input::-webkit-input-placeholder {
      color: #aab2bd;
    }

    .login-btn,
    .submit-btn,
    .enter-btn {
      margin-top: 64px;
      width: 600px;
      height: 96px;
      border-radius: 16px;
      background-color: #536dfe;
      box-shadow: 0px 5px 12px 0px rgba(83, 109, 254, 0.44);
      line-height: 66px;
      color: rgba(255, 255, 255, 1);
      font-size: 36px;
    }
    .submit-btn {
      margin-top: 88px;
    }

    .enter-btn {
      margin-top: 120px;
    }

    .login-link {
      margin-top: 64px;
      height: 44px;
      line-height: 44px;
      color: rgba(83, 109, 254, 1);
      font-size: 32px;
      text-align: justify;
      display: flex;
      justify-content: center;
      width: 100%;
    }
  }
}

.jeicon {
  color: #cfcfcf;
  font-size: 30px;
}

.phone-desc {
  margin-top: 4px;
  text-align: center;
  color: rgba(61, 60, 60, 1);
  margin-bottom: 10px;
  span {
    font-size: 13px;
  }
}

.loading-bar54 {
  margin-bottom: 27px !important;
}

.jeicon-eye {
  position: absolute;
  right: 20px;
  font-size: 30px;
  line-height:84px;
}

.jeicon-eye-close {
  position: absolute;
  right: 20px;
  font-size: 30px;
  line-height:84px;
}

.page-container {
  height: 100%;
  overflow: hidden;
  height: 100%;
  position: relative;
  overflow: hidden;
  background-color: #fff;
}
</style>
